<template lang="pug">
el-dialog(
  title="模板名称"
  :visible.sync="show"
  @open="beforeOpen"
  width="483px"
  @close="close"
  :close-on-click-modal="false"
)
  .model-body
    .model-label 模版名称
    .model-input
      el-input(type="text" size="small" placeholder="为了便于识别，请给模型命名" v-model="modelName" maxlength="16" show-word-limit)
  .model-handle(slot="footer")
    el-button(@click="close" size="mini") 取消
    el-button(name="primary" size="mini" @click="confirmModelPop") 确定
</template>

<script>
import * as Api from 'api'
export default {
  name: 'modelNameDialog',
  props: {
    show: Boolean,
    item: Object,
    skuList: [Object, Array],
    modelDialogType: String
  },
  data () {
    return {
      modelName: ''
    }
  },
  methods: {
    beforeOpen () {
      this.modelName = ''
      if (this.item.templateName) this.modelName = this.item.templateName
    },
    close () {
      this.$emit('close')
    },
    async confirmModelPop () {
      try {
        if (!this.modelName) {
          this.$message.error('请输入模板名称！')
          return
        }
        let params = {
          name: this.modelName
        }
        if (this.modelDialogType === 'editSpecModel') {
          params.type = 1
          if (this.item.id) params.id = this.item.id
          if (this.item.value && this.item.value.items.length) {
            params.value = JSON.stringify(this.item.value)
          } else {
            params.value = JSON.stringify(this.skuList)
          }
        } else {
          params.type = 3
          if (this.item.id) params.id = this.item.id
          if (this.item.value && this.item.value.length) {
            params.value = JSON.stringify(this.item.value)
          } else {
            params.value = JSON.stringify(this.skuList)
          }
        }
        console.log(params)
        await this.$axios.post(Api['saveMaterialTemplate'], { ...params })
        this.$emit('confirm')
      } catch (err) {
        this.$message.error(err.msg)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.model-body {
  display: flex;
  align-items: center;
  .model-label {
    margin-right: 10px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
    &:after {
      content: '*';
      color: #FF0000;
    }
  }
  .model-input {
    flex: 1;
  }
}
</style>
